<!-- 全国建筑物采集情况统计 -->
<template>
    <div class="statistics">
        <circle-svg :name="'城镇住宅'" :color="'#46FFFF'" :process="purpose0" />
        <circle-svg :name="'城镇非住宅'" :color="'#FE5089'" :process="purpose1" />
        <circle-svg :name="'农村住宅'" :color="'#25FFAF'" :process="purpose2" />
        <circle-svg :name="'农村非住宅'" :color="'#FFB35B'" :process="purpose3" />
        <!-- <template v-for="(item,index) in circleConfig" :key="index">
            <circle-svg :name="'农村非住宅'" :color="item.color" :process="item.num" />
        </template> -->
    </div>
</template>
<script setup>
import CircleSvg from './CircleSvg.vue';
import { getSituation } from '@/api/housingFacilities.js';
const purpose0 = ref(0);
const purpose1 = ref(0);
const purpose2 = ref(0);
const purpose3 = ref(0);
getSituation().then((res) => {
    res.data.map((item, index) => {
        if(item.purpose == "0")
         purpose0.value = item.proportion;

        if(item.purpose == "1")
         purpose1.value = item.proportion;

         if(item.purpose == "2")
         purpose2.value = item.proportion;

         if(item.purpose == "3")
         purpose3.value = item.proportion;

    })
});
</script>
<style scoped lang="scss">
.statistics{
    position: relative;
    height: 240px;
    background: url('@/assets/images/housing/pc.png');
    background-repeat: no-repeat;
    background-position: 62px 20px;
    .circle-box{
        position: absolute;
        &:first-child{
            top: 35px;
            left: 46px;
        }
        &:nth-child(2){
            left: 120px;
            bottom: 25px;
        }
        &:nth-child(3){
            right: 120px;
            bottom: 30px;
        }
        &:last-child{
            top: 30px;
            right: 46px;
        }
    }
}
</style>